<template>
  <div v-if="info?.meta?.includes('refund')">
    <t-popconfirm :visible="visible" theme="warning" placement="bottom-left" @visible-change="onVisibleChange" @confirm="handleConfirm">
      <template #icon><p></p></template>
      <template #content>
        <div class="popconfirm-body">
          <t-form :data="formData" :rules="rules" ref="form" label-align="top" @submit="onSubmit">
            <t-form-item label="退款金额" name="refund_amount" style="margin-bottom: var(--td-comp-margin-xxl);">
              <t-input v-model="formData.refund_amount" placeholder="请输入退款金额"></t-input>
            </t-form-item>
            <t-form-item label="退款描述" name="refund_msg">
              <t-textarea v-model="formData.refund_msg" placeholder="请输入退款描述"></t-textarea>
            </t-form-item>
          </t-form>
        </div>
      </template>
      <t-button>退款</t-button>
    </t-popconfirm>
  </div>
</template>

<script>
import {agentOrderRefundApi} from "@/api/order";

export default {
  name: 'OptionRefund',
  props: {
    info: {
      type: Object,
      default: () => {}
    },
  },
  data() {
    return {
      visible: false,
      formData: {
        refund_amount: '', // number 可选需付商品总费用（pay_type==1时包含订金）（两位小数）（空值不改动）
        refund_msg: '', // 可选管理订单备注（空值不改动）
      },
      rules: {
        refund_amount: [
          { required: true, message: '请输入实收', type: 'error' },
        ],
      },
    }
  },
  methods: {
    onVisibleChange(val, context = {}) {
      // trigger 表示触发来源，可以根据触发来源自由控制 visible
      if (context && context.trigger !== 'confirm') {
        this.visible = val;
        this.formData = {
          refund_amount: this.info.have_pay_fee, // number 可选需付商品总费用（pay_type==1时包含订金）（两位小数）（空值不改动）
          refund_msg: '', // 可选管理订单备注（空值不改动）
        }
      }
    },
    handleConfirm() {
      this.$refs.form.submit()
    },
    onSubmit({ validateResult, firstError }) {
      if (validateResult === true) {
        this.handleSubmit()
      } else {
        this.$message.error(firstError);
      }
    },
    handleSubmit() {
      agentOrderRefundApi(this.info.id, this.formData).then(res=> {
        this.visible = false
        this.$message.success('修改成功')
        this.$emit('refresh')
      }).catch(err=> {
        console.log('err', err)
      })
    }
  }
}
</script>

<style lang="less" scoped>

</style>
